<template>
	<view class="content">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>

			</block>
		</cu-custom>
		<mescroll-body bottom="20%" height="80%" class="mescroll-body" ref="mescrollRef" :down="downOption"
			@init="mescrollInit" @up="upCallback">

			<view class="top-notice  bg-white">
				<view class="top flex align-center justify-between">
					<text>开启推送通知，及时查看消息</text>

					<view class="middle right-btn" @click="openTips">
						{{isTips?"关闭":"开启"}}
					</view>

				</view>

				<view class="bottom-box  grid col-4">
					<view class="middle item flex flex-direction" v-for="(notice,i) in noticeType" :key="i" @click="jumpTo(i)">

						<view class="icon-box ">
							<image :src="res+notice.img" class="" mode=""></image>
							<view class="notice-num" v-if="notice.num"></view>

						</view>

						<text class="">{{notice.name}}</text>


					</view>
				</view>

			</view>

			<view class="notice-list  bg-white">
				<view class="notice-item  flex" v-for="(item,index) in notice" :key="index">
					<image :src="res+item.headImg" class=" round" mode=""></image>
					<view class="right  justify-center flex flex-direction">
						<view class="top flex">
							<view class="name basis-lg text-cut">{{item.name}}</view>
							<view class=" basis-sm align-center flex justify-end">
								{{item.create_time}}
							</view>
						</view>

						<view class="bottom  flex align-center">
							<view class=" basis-lg text-cut">{{item.content}}</view>
							<view class=" basis-sm align-center flex justify-end">
								<view class="notice-circle round middle text-white" v-if="item.num!=0">
									{{item.num}}
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</mescroll-body>

	</view>

</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	import {
		getNoticeList
	} from "../../static/shetuan/api.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "消息",
				isTips: false,
				res: this.apiHost + "/static/otherApp/",
				noticeType: [
					{
						name: "回复我的",
						num: true,
						img: "/static/shetuan/replay.png"
					},
					{
						name: "@我的",
						img: "/static/shetuan/replay.png"
					},
					{
						name: "关注我的",
						num: true,
						img: "/static/shetuan/guanzhu.png"
					},
					{
						name: "我的申请",
						img: "/static/shetuan/shenqing.png"
					}
				],
				notice: [],
				downOption: {
					use: false
				},
				upOption: {
					page: {
						num: 0, 
						size: 5 
					},
					noMoreSize: 4, 
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看',
						textNoMore: '-- 没有更多了 --'
					},
					isBounce:false
				
				},


			}

		},
		methods: {


			openTips() {
				// if (!this.isTips) {
				// 	uni.showModal({
				// 		title: "消息提示",
				// 		content: "是否开启推送通知？",
				// 		success: e => {
				// 			if (e.confirm) {
				// 				this.isTips = this.isTips ? false : true;
				// 			}
				// 		}
				// 	})

				// } else {
					this.isTips = this.isTips ? false : true;
				// }

			},
			jumpTo(){
				uni.showToast({
					title:"暂未开放",
					icon:"none"
				})
			},
			upCallback(page) {
				getNoticeList(page.num, page.size).then(curPageData => {
					console.log(curPageData)
					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.notice = [];
					this.notice = this.notice.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}


	}
</script>

<style scoped lang="scss">
	.content {
		font-family: PingFang SC;


		.top-notice {
			padding: 20rpx;

			.top {
				height: calc(100vw*(80/750));
				background: #F7F7F7;
				border-radius: 20rpx;
				padding: 0 36rpx;

				.right-btn {
					min-width: calc(100vw*(80/750));
					height: calc(100vw*(40/750));
					border: 2rpx solid #DBDBDB;
					border-radius: 10rpx;
				}
			}

			.bottom-box {
				margin: 60rpx 0;

				.item {
					.icon-box {
						position: relative;
						width: calc(100vw*(80/750));
						height: calc(100vw*(80/750));

						image {
							width: inherit;
							height: inherit;
						}

						.notice-num {
							width: calc(100vw*(28/750));
							height: calc(100vw*(28/750));
							right: calc(100vw*(-14/750));
							top: calc(100vw*(-14/750));
							position: absolute;
							background: #DD3131;
							border: 4rpx solid #FFFFFF;
							border-radius: 50%;
						}
					}

					text {
						font-size: 24rpx;
						font-weight: 800;
						color: #333333;
						line-height: 62rpx;
					}

				}
			}

		}

		.notice-list {
			margin-top: 20rpx;

			.notice-item {
				width: 100vw;
				padding: 30rpx 40rpx;
				min-height: calc(100vw*(162/750));

				image {
					width: calc(100vw*(100/750));
					height: calc(100vw*(100/750));
				}

				.right {
					width: calc(100vw*(549/750));
					margin-left: 19rpx;

					.top {
						.name {
							font-size: 32rpx;
							font-weight: 800;
							color: #333333;
						}
					}

					.bottom {
						margin-top: 19rpx;

						.notice-circle {
							width: calc(100vw*(30/750));
							height: calc(100vw*(30/750));
							background: #DC2C2C;

						}
					}
				}
			}
		}

	}
</style>
